<template>

    <div class="headbox">
        <header>
            <div class="w-box">
                <div class="navlogo">
                    <img src="../assets/logo.png" alt="">
                </div>
                <div class="rightbox">
                        <div class="nav-list">
                            
                            <el-autocomplete
                            placeholder="请输入商品信息"
                            icon="search"
                            v-model="input"
                            minlength=1
                            maxlength=100
                            >
                            </el-autocomplete>
                    </div>
                </div>
                <div class="navside">
                    <!-- 用户 -->
                    <div class="user">
                        <img src="../assets/用户.png" alt="">
                    </div>
                    <span> <img src="../assets/sp.png" alt=""></span>
                    <!-- 购物车 -->
                    <div class="cart">
                        <img src="../assets/cart.png" alt="">
                    </div>
                </div>
            </div>
        </header>
    </div>
</template>
<script>
export default {
    name:"myhead"
}
</script>
<style lang="scss" scoped>

@import "../assets/style/theme";
  @import "../assets/style/mixin";
.headbox{
    background: $head-bgc;
    background-image: -webkit-linear-gradient(#000, #121212);
    background-image: linear-gradient(#000, #121212);
    width: 100%;
    left: 0;
    top:0;
}
header{
    height: 100px;
    z-index: 30;
    position: relative;
}
.w-box{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    .navlogo{
        width: 50px;
        height: 50px;
        
        margin-left: 50px;
        img{
            width: 50px;
            height: 50px;           
            margin-right: 20px;
        }
    }
    .nav-list {
      
      display: flex;
      justify-content: center;
      align-items: center;
      
      el-autocomplete{
        width: 305px;
        background-color:white;
        border-radius: 8px;
        height: 40px;
      }
      a {
        width: 110px;
        color: #c8c8c8;
        display: block;
        font-size: 14px;
        padding: 0 25px;
        &:hover {
          color: #fff;
        }
      }
      .rightbox {
      
      display: flex;
    }

    }
}
.navside{
    display: flex;
    align-items: center;
    padding-right: 50px;
    img{
        width: 40px;
        height: 40px;
        margin-top: 14px;
        margin-right: 20px;
    }
}


</style>